<%@ page contentType="text/html;charset=UTF-8" %>
<%@ include file="../../include/tag.jsp" %>
<html>
<head>
    <title>选择品牌</title>
    <link rel="stylesheet" href="${ctxStatic}/layui-v2.2.45/layui/css/layui.css">
    <script type="text/javascript" src='${ctxStatic}/jquery/jquery-2.1.4.min.js'></script>
    <style type="text/css">
        li {
            border: 1px solid #ececec;
            display: inline-block;
            padding-left: 20px;
            padding-right: 20px;
            margin-right: 10px;
            margin-bottom: 10px;
            height: 35px;
            line-height: 35px;
            height: 35px;
        }

        li:hover {
            cursor: pointer;
        }

        li.checked {
            background-color: #cfb31b;
            color: white;
        }
    </style>
</head>
<body>
<div style="padding: 10px;">
    <ul>
        <c:forEach var="brand" items="${brandList}">
            <c:set var="flag" value="false"></c:set>
            <c:forEach var="brandId" items="${useBrandIds}">
                <c:if test="${brandId == brand.id}">
                    <c:set var="flag" value="true"></c:set>
                </c:if>
            </c:forEach>
            <c:if test="${flag == true}">
                <li class="checked" data-id="${brand.id}">${brand.name}</li>
            </c:if>
            <c:if test="${flag == false}">
                <li data-id="${brand.id}">${brand.name}</li>
            </c:if>
        </c:forEach>
    </ul>
</div>
</body>
<script type="text/javascript">
    $(function () {
        $("li").click(function () {
            var type = '${type}' || '';
            var length = $("li.checked").length;
            if (!$(this).hasClass("checked")) {
                $(this).addClass("checked");
            } else {
                $(this).removeClass("checked");
            }
        });
    });

    function doSubmit() {
        var array = new Array();
        $("li.checked").each(function (index, ele) {
            var id = $(ele).attr("data-id");
            var name = $(ele).text();
            var result = {
                id : id,
                name : name
            };
            array.push(result);
        });
        return array;
    }
</script>
</html>